<template>
	<view>
		<view class="list uni-column">
			<view class="uni-row header">
				<view style="flex: 3;"> 时 间</view>
				<view style="flex: 1;"> 数 量</view>
				<view> 均 价</view>
				<view> 状 态</view>
				<view> 操 作</view>
			</view>
			<view class="raw uni-row" v-if="floorOrders.length!=0" v-for="(item,index) in floorOrders" :key="index">
				<view style="flex: 3;"> 02-11 23:32</view>
				<view style="flex: 1;">{{item.size}}(L{{item.level}})</view>
				<view>{{item.price}}</view>
				<view class="state-good" v-if="item.state==2"> 完全成交</view>
				<view class="state-warn" v-else-if="item.state==-2"> {{item.code}}</view>
				<view class="state-good" v-else-if="item.state==-1"> 撤单成功</view>
				<view class="state" v-else-if="item.state==0"> 等待成交</view>
				<view class="state" v-else-if="item.state==1"> 部分成交</view>
				<view class="state" v-else-if="item.state==3"> 下单中</view>
				<view class="state" v-else-if="item.state==4"> 撤单中</view>
				<view class="action" v-if="item.state==0" @click="cancelOrder(item.order_id)"> 撤 销</view>
				<view class="disabled" v-else > 撤 销</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self
	export default {
		data() {
			return {
				floorOrders: [],
				instrumentId: '',
				floorId: '',
				futureCategory:'',
				tickerTimer: null
			}
		},
		onUnload() {
			if (_self.tickerTimer != null)
				clearInterval(_self.tickerTimer);
		},
		onHide() {
			if (_self.tickerTimer != null)
				clearInterval(_self.tickerTimer);

		},		
		onNavigationBarButtonTap(e) {
			uni.navigateBack({
				delta:1
			})
		},
		onLoad(e) {
			console.log("onLoad " + JSON.stringify(e))
			_self = this
			_self.floorId = e.floorId
			_self.instrumentId = e.instrumentId
			_self.futureCategory = e.futureCategory
			_self.loadFloor()
		},
		methods: {
			loadFloor() {
				console.log("loadFloor ")
				uni.request({
					url: _self.api + '/futures/orders/' + _self.floorId+"?futrueCategory="+_self.futureCategory,
					method: 'GET',
					header: {
						"Authorization": "Bearer " + _self.getToken()
					},
					success: res => {
						console.log("loadFloor Resps")
						console.log(res.data.data)
						_self.floorOrders = res.data.data
						uni.hideLoading()
					}
				});
			},
			cancelOrder(orderId) {
				uni.showLoading({
					title: "撤单中"
				})
				console.log("cancelOrder " + orderId)
				uni.request({
					url: _self.api + '/futures/orders/cancel/' + _self.instrumentId + '/' + orderId,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + _self.getToken()
					},
					success: res => {
						if (_self.tickerTimer == null)
							this.tickerTimer = setInterval(() => {								
								_self.loadFloor()
							}, 2000);
						uni.hideLoading()
					}
				});
			}
		}
	}
</script>

<style>
	/* 	view {
		border: #000000 1px solid;
	} */

	.header view {
		font-weight: bold;
		flex: 2;
		text-align: center;
		font-size: 30upx;
		border-bottom: #6E6B6B 1px solid;
	}

	.raw view {
		flex: 2;
		text-align: center;
		font-size: 30upx;
		border-bottom: #DBDBDB 1px dashed;
	}

	.action {
		font-weight: bold;
		color: #007AFF;
	}
	
	.disabled {
		font-weight: bold;
		color: #8C9097;
	}

	.state-good {
		color: #00B26A;
	}

	.state-warn {
		color: #D30000;
	}

	.state {
		color: #8C9097;
	}
</style>
